<template>
	<view class="message-page">
		<!-- 通知公告列表 -->
		<view class="my-card" v-for="item in list" :key="item.id">
			<view class="u-flex title">
				<image style="width: 40rpx;height: 40rpx;" src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/icon-msg.png" mode=""></image>
				<text class="u-font-24 u-flex-1 u-m-l-10">{{ item.title }}</text>
				<text class="u-font-22 u-tips-color">{{ item.time }}</text>
			</view>
			<!-- <view class="u-font-30 u-m-t-20">更新维护通告</view> -->
			<view class="u-font-24 u-content-color u-m-t-10" v-html="item.content" style="overflow: hidden;text-overflow: ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:3;"></view>
			<navigator :url="`/pages/message/detail?id=${item.id}`" class="u-m-t-20 u-tips-color">
				查看详情
				<u-icon name="arrow-right"></u-icon>
			</navigator>
		</view>
		
		<!-- <view class="my-card">
			<view class="u-flex title">
				<image style="width: 40rpx;height: 40rpx;" src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/icon-msg.png" mode=""></image>
				<text class="u-font-24 u-flex-1 u-m-l-10">通知公告</text>
				<text class="u-font-22 u-tips-color">2023-09-08 12:00:00</text>
			</view>
			<view class="u-font-30 u-m-t-20">更新维护通告</view>
			<view class="u-font-24 u-content-color u-m-t-10">小程序将于9月27号0点开始维护小程序将于月号点开
				始维护，对您造成的不便敬请谅解</view>
			<navigator url="/pages/message/detail" class="u-m-t-20 u-tips-color">
				查看详情
				<u-icon name="arrow-right"></u-icon>
			</navigator>
		</view>
		<view class="my-card">
			<view class="u-flex title">
				<image style="width: 40rpx;height: 40rpx;" src="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/icon-msg.png" mode=""></image>
				<text class="u-font-24 u-flex-1 u-m-l-10">店铺通知</text>
				<text class="u-font-22 u-tips-color">2023-09-08 12:00:00</text>
			</view>
			<view class="u-font-30 u-m-t-20">您的订单已经开始发货，点击查看详情</view>
			<view class="u-font-24 u-content-color u-m-t-10">小程序将于9月27号0点开始维护小程序将于月号点开
				始维护，对您造成的不便敬请谅解</view>
			<navigator url="/pages/message/detail" class="u-m-t-20 u-tips-color">
				查看详情
				<u-icon name="arrow-right"></u-icon>
			</navigator>
		</view> -->
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[]
			}
		},
		onLoad() {
			// 通知公告列表
			this.get_notify_index()
		},
		onPullDownRefresh(){
			// 通知公告列表
			this.get_notify_index()
		},
		methods: {
			// 通知公告列表
			get_notify_index(){
				uni.showLoading({
					title: '加载中...'
				});
				this.$http({
					url: this.api.notify_index,
					method: 'GET',
				}).then(res=>{
					// console.log(res,'通知公告列表');
					if(res.code == 1){
						this.list = res.data.list;
						uni.hideLoading();
						uni.stopPullDownRefresh();
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.message-page {
		.my-card {
			padding-left: 80rpx;
			position: relative;

			.title {
				position: relative;
				left: -50rpx;
			}
		}
	}
</style>
